<template>
	<view class="s-list">
    <Header title="检查人" bgColor="#fff" :leftIconSize="20" ></Header>
    <!-- 搜索 -->
		<view class="s-search-box">
			<uv-search :clearabled="true" placeholder="检查人名称" :showAction="false" v-model="keyword"  @change="searchFun()" @clear="clearFun()"></uv-search>
		</view>
		<!-- 搜索-end -->
		<view class="s-list-main" >
      <view v-if="emptyFlag" class="empty-box">
        <uv-empty mode="data" icon="/static/image/no-data.png" width="200rpx" height="260rpx" text="&nbsp;"/>
      </view>
			<view class="s-box pad25" v-else>
				<view class="s-check-box">
					<!--<uv-checkbox-group v-model="allBoxValue" iconPlacement="left" placement="column">-->
						<!--<uv-checkbox :checked="allCheck" name="apple" label="全选" @change="allChecked"></uv-checkbox>-->
					<!--</uv-checkbox-group>-->
					<checkbox-group @change="allChecked">
						<label class="cu-checked-group">
							<checkbox hidden color="#FFFFFF" value="2" />
							<view class="cu-checkbox" v-if="checkType!==2" :class="checkType===1 ? 'check-not-full' : (checkType===2 ? 'check-full': 'check-not')">
								<view class="uni-checkbox-input"></view>
							</view>
							<view class="cu-checkbox check-full iconfont icon-duihao1" v-if="checkType===2">
							</view>
							<text class="text">全选</text>
						</label>
					</checkbox-group>
					<view class="right">已选择:{{ checkboxValue.length }}/{{ groupList.length }}</view>
				</view>
				<view class="s-check-group">
					<uv-checkbox-group v-model="checkboxValue" iconPlacement="left" placement="column" @change="changeCheckbox">
						<uv-checkbox :checked="item.checked" :name="item.userId" :label="item.userName" v-for="(item, index) in groupList" :key="index"></uv-checkbox>
					</uv-checkbox-group>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="s-btn-common">
			<uv-button type="primary" text="确认" @click="confirmFun()"></uv-button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive,getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import supUserDistrictAPI from '@/api/law/supUserDistrict/supUserDistrict';

const {proxy} = getCurrentInstance();
let checkType = ref(0)
let form = reactive({})
//选择数组
const groupList = ref([]);
// //默认选择0
const allBoxValue = ref([]);
// //选中的数组所有的值
const checkboxValue = ref([]);

const schoolId =  ref('');

const keyword = ref('');

const allCheck = ref(false);

const emptyFlag = ref(false);

onLoad((option) => {
  if(option.data){
    let obj=JSON.parse(decodeURIComponent(option.data))
    checkboxValue.value= obj.checkboxValue;
    schoolId.value= obj.schoolId;
  }
  getUserlList();
});
let searchFun = () => {
  getUserlList();
};
/** 清空搜索 */
let clearFun = () => {
  getUserlList();
}
// 获取学校列表
let getUserlList = async () => {
     groupList.value=[];
     let res= await proxy.http.asyncPost(supUserDistrictAPI.getSupUserDistrictList,{userName:keyword.value, createOrgId: uni.getStorageSync("userInfo").user.orgId, params:{sourceId:schoolId.value}});
     if (res.code === 0) {
       res.data.forEach(item => {
         if(checkboxValue.value.length>0){
           checkboxValue.value.includes(item.userId)?item.checked=true:item.checked=false;
         }else{
           item.checked=false;
         }
         groupList.value.push(item)
         if(groupList.value.length!=0 && checkboxValue.value.length == groupList.value.length){
           allCheck.value = true;
         }
		   changeCss();
       });
       emptyFlag.value =  groupList.value.length <= 0;
     } else {
       await uni.showToast({title: res.msg, icon: 'none'});
     }
};

const queryForm = reactive({
	verificationFlag: '0'
});

// 点击确认
const confirmFun = () => {
  let  checkboxUser = groupList.value.filter(function(obj) {
    return checkboxValue.value.includes(obj.userId);
  });
  uni.navigateBack({
    delta: 1,
    success: function(res) {
      uni.$emit('selsectExaminer',checkboxUser)
    }
  })
};
//数组改变事件
const changeCheckbox = (e) => {
	//循环列表先都置为false （未选中状态）
	groupList.value.forEach((a) => {
		a.checked = false;
		allCheck.value = false;
	});
	//然后假如checkboxGroup传过来的 detail.value中有某个id则把这些元素的checked属性置为true(选中状态)
	groupList.value.forEach((a) => {
		e.forEach((b) => {
			if (a.value == b) {
				a.checked = true;
			}
		});
	});
	//如果选中的checkbox的value的数组长度和后端传过来的数组长度相等则为全选状态 allCheck为true
	if (e.length == groupList.value.length) {
		allCheck.value = true;
	}
	//将选中的数组保存在某个ref中
	checkboxValue.value = e;
	changeCss();
};
//全选 以及反选
const allChecked = () => {
	//更改选中状态
	allCheck.value = !allCheck.value;
	if (allCheck.value == true) {
		groupList.value.forEach((a) => {
			a.checked = true;
		});
		checkboxValue.value = groupList.value.map((item) => {
			return item.userId;
		});
	} else {
		groupList.value.forEach((a) => {
			a.checked = false;
		});
		checkboxValue.value = [];
	}
	changeCss();
};
const changeCss = () =>{
	if(!checkboxValue.value.length){
		checkType.value = 0
	}else if(checkboxValue.value.length == groupList.value.length){
		checkType.value = 2
	}else{
		checkType.value = 1
	}
}
</script>

<style scoped lang="scss">
	.cu-checked-group {
		padding: 10px 0;
		display: flex;
		align-items: center;
		font-size: 14px;
		font-weight: normal;
		/*border-bottom: 1px #eee solid;*/

		.text{
			margin-left: 5px;
			color: #303133;
			font-size: 16px !important;
		}
	}
	.cu-checkbox{
		font-family: uvicon-iconfont;
		position: relative;
		width: 18px;
		height: 18px;
		border: 1px solid #DCDFE6;
		border-radius: 3px;
		background-color: #fff;
		box-sizing: border-box;
		&.check-not {
			border: 2px solid #C8C9CC;
			background-color: #fff;
		}

		&.check-not-full {
			border-color: #007aff;
			background-color: #007aff;
			.uni-checkbox-input {
				position: absolute;
				/* #ifndef APP-NVUE */
				top: 3px;
				/* #endif */
				left: 3px;
				height: 6px;
				width: 10px;
				border-bottom-width: 2px;
				border-bottom-color: #e7e7e7;
				border-bottom-style: solid;
				transform-origin: center;
			}

		}

		&.check-full {
			border-color: #007aff;
			background-color: #007aff;
			.uni-checkbox-input image{
				width: 12px;
				height: 10px;
				margin-left: 2px;
				margin-top: 3px;
			}
		}
	}

</style>
